<template>
  <div>
    <div class="tip custom-block">
      <p class="custom-block-title">TIP</p>
      <p>当使用 <code>show-checkbox</code>时，由于 <code>check-on-click-node</code> 默认值是 false，这时候只能通过 checkbox 来选中，当然您也可以将其设置成
        true，这样点击整个 node 都可以用来完成选择</p>
    </div>
    <h2>多选</h2>
    <p>通过点击或复选框选择多个选项。</p>
    <el-tree-select v-model="value" :data="data" multiple :render-after-expand="false" />
    <el-divider />
    show checkbox:
    <el-tree-select v-model="value" :data="data" multiple :render-after-expand="false" show-checkbox />
    <el-divider />
    show checkbox with `check-strictly`:
    <el-tree-select v-model="valueStrictly" :data="data" multiple :render-after-expand="false" show-checkbox
      check-strictly check-on-click-node />
  </div>
</template>

<script>

export default {
  name: 'TreeSelectMultiple',
  data() {
    return {
      value: '',
      valueStrictly: '',
      data: [
        {
          value: '1',
          label: 'Level one 1',
          children: [
            {
              value: '1-1',
              label: 'Level two 1-1',
              children: [
                {
                  value: '1-1-1',
                  label: 'Level three 1-1-1',
                },
              ],
            },
          ],
        },
        {
          value: '2',
          label: 'Level one 2',
          children: [
            {
              value: '2-1',
              label: 'Level two 2-1',
              children: [
                {
                  value: '2-1-1',
                  label: 'Level three 2-1-1',
                },
              ],
            },
            {
              value: '2-2',
              label: 'Level two 2-2',
              children: [
                {
                  value: '2-2-1',
                  label: 'Level three 2-2-1',
                },
              ],
            },
          ],
        },
        {
          value: '3',
          label: 'Level one 3',
          children: [
            {
              value: '3-1',
              label: 'Level two 3-1',
              children: [
                {
                  value: '3-1-1',
                  label: 'Level three 3-1-1',
                },
              ],
            },
            {
              value: '3-2',
              label: 'Level two 3-2',
              children: [
                {
                  value: '3-2-1',
                  label: 'Level three 3-2-1',
                },
              ],
            },
          ],
        },
      ]
    }
  },
  methods: {

  },
}
</script>

<style scoped>
.custom-block.tip {
  padding: 8px 16px;
  background-color: rgba(64, 158, 255, .1);
  border-radius: 4px;
  border-left: 5px solid #409eff;
  margin: 20px 0;
}

.custom-block .custom-block-title {
  font-weight: 700;
}

p:first-child {
  margin-top: 0;
}
p, ol, ul {
    margin: 1rem 0;
    line-height: 1.7;
}
</style>